<div class="container-fluid">
  <div class="content-block">
    <div class="wiki-link mb-2">
      <a [href]="WIKI_BASE_URL + 'conditions'" target="_blank"> <i class="fas fa-link"></i> conditions documentation </a>
    </div>

    <form [formGroup]="selectService.queryForm">
      <ng-container [formGroup]="selectService.fields">
        <div class="form-group row">
          <label class="col-sm-5 col-md-4 col-lg-3 col-form-label" for="source_type" [translate]="'SOURCE_TYPE'"></label>
          <div class="col-sm-7 col-md-8 col-lg-9">
            <select formControlName="source_type" class="form-control form-control-sm" id="source_type">
              <option [ngValue]="" [label]=""></option>
              @for (key of SAI_SEARCH_TYPES_KEYS; track key) {
                <option [ngValue]="key" [label]="SAI_SEARCH_TYPES[key]"></option>
              }
            </select>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-5 col-md-4 col-lg-3 col-form-label" for="entryorguid">Entry(+) or GUID(-):</label>
          <div class="col-sm-7 col-md-8 col-lg-9">
            <input
              [formControlName]="'entryorguid'"
              type="number"
              class="form-control form-control-sm"
              id="entryorguid"
              placeholder="Entry (as positive number) or GUID (as negative number)"
            />
          </div>
        </div>
      </ng-container>
      <div class="form-group row">
        <label class="col-sm-4 col-md-3 col-lg-2 col-form-label" for="limit" [translate]="'LIMIT'"></label>
        <div class="col-sm-4 col-md-3 col-lg-2">
          <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Limit" />
        </div>
        <div class="col-sm-12 col-md-6 mt-1 mt-md-0">
          <button id="search-btn" class="btn btn-primary btn-sm" [disabled]="selectService.queryForm.invalid" (click)="onSearch()">
            <i class="fa fa-search"></i> {{ 'SEARCH' | translate }}
          </button>
        </div>
      </div>
      <keira-highlightjs-wrapper [code]="selectService.query" />
    </form>

    @if (selectService.rows) {
      <div>
        <ngx-datatable
          class="bootstrap table table-striped text-center datatable-select"
          [rows]="selectService.rows"
          [headerHeight]="DTCFG.headerHeight"
          [footerHeight]="DTCFG.footerHeight"
          [columnMode]="DTCFG.columnMode"
          [rowHeight]="DTCFG.rowHeight"
          [limit]="DTCFG.limit"
          [selectionType]="DTCFG.selectionType"
          (select)="onSelect($event)"
        >
          <ngx-datatable-column name="Entry or GUID" prop="entryorguid" [minWidth]="200" />
          <ngx-datatable-column name="Source Type" prop="source_type" />
        </ngx-datatable>
      </div>
    }
  </div>
</div>
